﻿{extend name="public:base" /}

{block name="css"}

<style>
    #mask {
        width: calc(100% - 220px);
        height: calc(100% - 60px);
        background: rgba(0, 0, 0, .5);
        position: fixed;
        right: 0;
        bottom: 0;
        z-index: 500;
    }

    #mask .box {
        width: 500px;
        height: calc(100% - 60px);
        background: #fff;
        position: fixed;
        right: 0;
        bottom: 0;
        z-index: 1000;
        padding: 15px;
    }

    #mask .box .title {
        font-size: 18px;
        color: #000;
        font-weight: bold;
        padding-bottom: 15px;
        border-bottom: 1px solid #e5e5e5;
    }

    #mask .box .main-box {
        height: calc(100% - 140px);
        overflow-y: scroll;
    }


    #mask .box .spec-box {
        display: flex;
        flex-direction: column;
        margin-top: 20px;
    }

    #mask .box .spec-box .info-box {
        margin-bottom: 10px;
    }

    #mask .box .spec-box .info-box .spec, #mask .box .count-box .info-box .count-title {
        font-size: 18px;
        color: #000;
    }

    #mask .box .spec-box .info-box .value-box {
        display: flex;
        flex-wrap: wrap;
        width: 100%;
        margin-top: 6px;
    }

    #mask .box .spec-box .info-box .value-box .value {
        padding: 10px 35px;
        border: 1px solid #ccc;
        border-radius: 5px;
        margin-bottom: 6px;
        margin-right: 6px;
        cursor: pointer;
    }

    #mask .box .spec-box .info-box .value-box .active {
        color: #fff;
        background: #1ab394;
    }

    #mask .box .count-box .info-box .count {
        margin-top: 10px;
        border: 1px solid #ccc;
        padding: 10px 0;
        text-align: center;
        border-radius: 5px;
        outline: none;
    }

    #mask .box .footer {
        display: flex;
        flex-direction: column;
    }

    #mask .box .footer .choose-info {
        font-size: 18px;
    }

    #mask .box .footer .btn-box {
        display: flex;
        margin-top: 10px;
    }

    #mask .box .footer .btn-box .cancel-btn {
        color: #fff;
        background: #ccc;
        padding: 10px 40px;
        margin-right: 20px;
        border-radius: 5px;
        cursor: pointer;
    }

    #mask .box .footer .btn-box .confirm-btn {
        color: #fff;
        background: #1ab394;
        padding: 10px 40px;
        border-radius: 5px;
        cursor: pointer;
    }

    /*购物车按钮*/
    #car-box {
        display: flex;
        width: 80px;
        height: 80px;
        position: fixed;
        right: 20px;
        bottom: 20px;
        cursor: pointer;
    }

    #car-box img {
        display: block;
        width: 100%;
        height: 100%;
    }

    #car-box .goods-count {
        display: block;
        width: 30px;
        height: 30px;
        background: #ff2525;
        border-radius: 15px;
        position: absolute;
        top: -10px;
        right: 0;
        z-index: 100;
        font-size: 14px;
        line-height: 30px;
        color: #fff;
        text-align: center;
    }

    #car-mask {
        width: calc(100% - 220px);
        height: calc(100% - 60px);
        background: rgba(0, 0, 0, .5);
        position: fixed;
        right: 0;
        bottom: 0;
        z-index: 500;
    }

    #car-mask .box {
        width: 500px;
        height: calc(100% - 60px);
        background: #fff;
        position: fixed;
        right: 0;
        bottom: 0;
        z-index: 1000;
        padding: 15px;
    }

    #car-mask .box .title {
        font-size: 18px;
        color: #000;
        font-weight: bold;
        padding-bottom: 15px;
        border-bottom: 1px solid #e5e5e5;
    }

    #car-mask .box .main-box {
        height: calc(100% - 140px);
        overflow-y: scroll;
    }

    #car-mask .box .main-box .goods-box {
        display: flex;
        margin-top: 10px;
        justify-content: space-between;
        align-items: flex-end;
        padding-bottom: 10px;
        border-bottom: 1px solid #e5e5e5;
    }

    #car-mask .box .main-box .goods-box:last-child {
        border-bottom: none;
    }

    #car-mask .box .main-box .goods-box .img {
        width: 150px;
        height: 120px;
        border-radius: 5px;
        object-fit: cover;
    }

    #car-mask .box .main-box .goods-box .info {
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        flex: 1;
        margin-left: 20px;
        height: 120px;
    }

    #car-mask .box .main-box .goods-box .info .name {
        font-size: 18px;
        word-break: break-all;
        text-overflow: ellipsis;
        display: -webkit-box;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 2; /* 这里是超出几行省略 */
        overflow: hidden;
    }

    #car-mask .box .main-box .goods-box .info .spec, #car-mask .box .main-box .goods-box .info .price, #car-mask .box .main-box .goods-box .info .count {
        color: #999;
    }

    #car-mask .box .main-box .goods-box .del-btn {
        color: #fff;
        height: 30px;
        line-height: 30px;
        width: 80px;
        text-align: center;
        margin-right: 10px;
        border-radius: 5px;
        background: #e80f0f;
        cursor: pointer;
    }

    #car-mask .box .footer {
        display: flex;
        flex-direction: column;
    }

    #car-mask .box .footer .choose-info {
        font-size: 18px;
    }

    #car-mask .box .footer .btn-box {
        display: flex;
        margin-top: 10px;
    }

    #car-mask .box .footer .btn-box .cancel-btn {
        color: #fff;
        background: #ccc;
        padding: 10px 40px;
        margin-right: 20px;
        border-radius: 5px;
        cursor: pointer;
    }

    #car-mask .box .footer .btn-box .confirm-btn {
        color: #fff;
        background: #1ab394;
        padding: 10px 40px;
        border-radius: 5px;
        cursor: pointer;
    }
</style>{/block}

{block name="content"}
<div class="wrapper wrapper-content animated fadeInRight">
    <div class="row">
        <div class="col-lg-12">
            <div class="ibox ">
                <div class="ibox-content">
                    <div class="row search-form">
                        <div class="col-sm-2 m-b-sm">
                            <div class="input-group">
                                <select name="one_type_id" class="form-control form-control-lg one_type" onchange="changeOneType(this)">
                                    <option value="0">请选择一级分类</option>
                                    {volist name="type_list" id="vo"}
                                    <option value="{$vo.id}" {:input(
                                    'one_type_id') == $vo.id ? 'selected' : ''}>{$vo.name}</option>
                                    {/volist}
                                </select>
                            </div>
                        </div>
                        <div class="col-sm-2 m-b-sm">
                            <div class="input-group">
                                <select name="tow_type_id" class="form-control form-control-lg two_type">
                                    <option value="0">请选择二级分类</option>
                                </select>
                            </div>
                        </div>
                        <div class="col-sm-2 m-b-sm">
                            <div class="input-group">
                                <select name="is_stock" class="form-control form-control-lg">
                                    <option value="0">请选择</option>
                                    <option value="1" {:input(
                                    'is_stock') == 1 ? 'selected' : ''}>库存预警</option>
                                </select>
                            </div>
                        </div>

                        <div class="col-sm-2 m-b-sm">
                            <div class="input-group">
                                <select name="brand_id" class="form-control form-control-lg">
                                    <option value="0">请选择品牌</option>
                                    {volist name="brand_list" id="vo"}
                                    <option value="{$vo.id}" {:input(
                                    'brand_id') == $vo.id ? 'selected' : ''}>{$vo.name}</option>
                                    {/volist}
                                </select>
                            </div>
                        </div>

                        <div class="col-sm-2 m-b-sm">
                            <div class="input-group">
                                <button type="button" class="btn btn-primary btn-lg screen-btn">搜索</button>&nbsp;
                            </div>
                            <div class="input-group">

                            </div>
                        </div>
                    </div>
                    <div class="table-responsive">
                        <table class="table table-striped">
                            <thead>
                            <tr>
                                <th>商品名称</th>
                                <th>封面图</th>
                                <th>分类</th>
                                <th>品牌</th>
                                <th>操作</th>
                            </tr>
                            </thead>
                            <tbody>
                            {volist name="list" id="vo"}
                            <tr>
                                <td>{$vo.name}</td>
                                <td><img src="{:getPicture($vo.img)}" style="width: 60px; height: 60px"></td>
                                <td>{$vo.one_type_name} - {$vo.two_type_name}</td>
                                <td>{$vo.brand_name}</td>
                                <td class="project-actions">
                                    <div data-id="{$vo.id}" class="btn btn-white btn-sm chooseSpec">
                                        选择规格数量
                                    </div>
                                </td>
                            </tr>
                            {/volist}
                            </tbody>
                        </table>
                        {if !empty($list->items())}{$list->render()}{/if}
                    </div>

                </div>
            </div>
        </div>

    </div>
</div>

<input type="hidden" id="user_id" value="{:cookie('id')}">

<!--  购物车按钮  -->
<div id="car-box" onclick="openCarMask()">
    <img src="__ADMIN__/img/car.png">
    <div id="car-goods-count" class="goods-count">{$count ? $count : 0}</div>
</div>

<!--  规格-属性 弹框  -->
<div id="mask" style="display: none">
    <div class="box">
        <div class="title">选中规格</div>

        <div class="main-box">
            <div class="content-box">

            </div>

            <div class="count-box">
                <div class="info-box">
                    <div class="count-title">数量</div>
                    <input type="number" value="1" class="count" id="choose-count">
                </div>
            </div>
        </div>

        <div class="footer">
            <div class="choose-info">
                已选：
                <span id="choose-name"></span>
                <input type="hidden" id="choose-spec-id" value="">
            </div>
            <div class="btn-box">
                <div class="cancel-btn" onclick="cancelSpec()">取消</div>
                <div class="confirm-btn" onclick="confirmSpec()">确认</div>
            </div>
        </div>
    </div>
</div>

<!--  购物车列表  -->
<div id="car-mask" style="display: none">
    <div class="box">
        <div class="title">购物车</div>

        <div class="main-box goods-box-html">

        </div>

        <div class="footer">
            <div class="choose-info">
                订单金额：
                <span class="info car-all-price"></span>
            </div>
            <div class="btn-box">
                <div class="cancel-btn" onclick="$('#car-mask').hide();">取消</div>
                <a href="{:url('confirmOrder')}" class="confirm-btn">确认下单</a>
            </div>
        </div>
    </div>
</div>

{/block}

{block name="js"}
<script>
    var goods_id = 0;
    $('.chooseSpec').click(function () {
        $('.content-box').html('');
        $('#choose-name').html('');
        $('#choose-spec-id').val('')
        $('#choose-count').val(1);
        goods_id = $(this).data('id');
        $.post('/index/index/getSkusData', {goods_id}, res => {
            if (res.result == 1) {
                $('#mask').show();

                var {sku_list, sku_value_list} = res.data;
                sku_list.forEach(val => {
                    new Promise(reject => {
                        var spec_value_str = '';
                        val.child.forEach(value => {
                            if (value.status) spec_value_str += `<div class="value" data-id="${value.id}" onclick="chooseSpec(this)">${value.name}</div>`
                        })
                        reject(spec_value_str);
                    }).then(spec_value_str => {
                        var spec_str = `<div class="spec-box">
                            <div class="info-box">
                                <div class="spec">${val.name}</div>
                                <div class="value-box">
                                    ${spec_value_str}
                                </div>
                            </div>
                        </div>`
                        $('.content-box').append(spec_str);
                    })
                })
            } else {
                layer.msg(res.msg)
            }
        }, 'json')
    })

    function chooseSpec(that) {
        $(that).parent().find('.value').removeClass('active');
        $(that).addClass('active');

        var choose_name = '';
        var choose_id = '';
        $('.spec-box').each((key, val) => {
            $(val).find('.value-box .value').each((k, v) => {
                if ($(v).hasClass('active')) {
                    if (choose_name) {
                        choose_name += ' / ' + $(v).html();
                        choose_id += '-' + $(v).data('id');
                    } else {
                        choose_name = $(v).html();
                        choose_id = $(v).data('id');
                    }
                }
            })
        })
        $('#choose-name').html(choose_name);
        $('#choose-spec-id').val(choose_id);
    }

    function cancelSpec() {
        $('#mask').hide();
    }

    function confirmSpec() {
        var user_id = $('#user_id').val();
        var sku_id = $('#choose-spec-id').val();
        var count = $('#choose-count').val();

        $.post('/index/index/addCar', {user_id, goods_id, sku_id, count}, res => {
            if (res.result == 1) {
                layer.msg(res.msg);
                $('#car-goods-count').html(res.data);
                $('#mask').hide();
            } else {
                layer.msg(res.msg);
            }
        }, 'json')
    }

    function openCarMask() {
        $('#car-mask').show();
        var user_id = $('#user_id').val();

        $.post('/index/index/getCarList', {user_id}, res => {
            if (res.result == 1) {
                var goods_box_str = '';
                res.data.list.forEach(val => {
                    goods_box_str += `
                        <div class="goods-box">
                            <img src="${val.img}" class="img">
                            <div class="info">
                                <div class="name">${val.goods_name}</div>
                                <div class="spec">规格：${val.sku_name}</div>
                                <div class="price">价格：${val.price}</div>
                                <div class="count">数量：${val.count}</div>
                            </div>
                            <div class="del-btn" onclick="delCarGoods(this, ${val.id})">删除</div>
                        </div>`;
                })

                $('.goods-box-html').html(goods_box_str);
                $('.car-all-price').html(res.data.all_price)
            } else {

            }
        }, 'json')
    }

    function delCarGoods(that, id) {
        $.post('/index/index/delCarGoods', {id}, res => {
            if(res.result == 1){
                $(that).parent().remove();
                $('#car-goods-count').html(res.data.count);
                $('.car-all-price').html(res.data.all_price);
            }else{
                layer.msg(res.msg);
            }
        }, 'json')

    }
</script>

<script>
    var type_list = {$type_list_json};

    // 搜索跳转后二级分类回显
    var one_type_id = "{:input('one_type_id')}";
    if (one_type_id) changeOneType(this, one_type_id);

    // 选中一级分类渲染二级分类
    function changeOneType(that, get_one_type_id = 0) {
        var one_type_id = get_one_type_id ? get_one_type_id : $(that).val();

        var option = "<option value='0'>请选择二级分类</option>";
        for (var i = 0; i < type_list.length; i++) {
            if (one_type_id == type_list[i].id) {
                var son_list = type_list[i].son_list;
                if (son_list.length > 0) {
                    son_list.forEach(function (val) {
                        var two_type_id = "{:input('two_type_id')}";
                        var selected = two_type_id == val.id ? "selected" : "";

                        option += "<option value='" + val.id + "' " + selected + ">" + val.name + "</option>"
                    })
                }
                break;
            }
        }
        $('.two_type').html(option)
    }
</script>{/block}

